import React from 'react';

export default function ServicesCard({ data }) {
   
    const [isExpanded, setIsExpanded] = React.useState(false);

    const handleReadMore = () => {
        setIsExpanded(!isExpanded);
    };

    return (
        <div className="item">
            <img src={data.service.media[0].original_url} alt="services" />
            <div className="item-text">
                <h5>{data.service.name}</h5>
                <p>
                    {isExpanded
                        ? data.service.description
                        : `${data.service.description.substring(0,100)}...`}
                </p>
                <div className="team-button">
                    <a  onClick={handleReadMore} className="btn btn-sm style-skew">
                        <span>{isExpanded ? 'Show Less' : 'Read More..'}</span>
                    </a>
                </div>
            </div>
        </div>
    );
}